配置选项

Chart.js 提供了一系列选项用来配置创建的图表。这些选项可以通过创建图表时传入一个 options 对象进行配置，否则创建图表的时候将使用官方的全局配置。

图表数据

为了描绘图表，需要传入一个包含所有必须数据的 data 对象，data 对象可以包含以下属性：

自定义选项创建图表

简单的给js构造器声明一个包含自定义配置信息的options对象即可创建自定义选项图表。如下示例创建了一个非响应的图表：

var chartInstance = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        responsive: false
    }
});

全局配置

为了遵循DRY规范，Chart.js 1.0 版本中提成了这个概念，允许并且推荐修改所有类型图表都适用的配置选项，而不是为每一个实例单独修改配置，或者给特殊的实例也使用默认配置。

Chart.js 正确地将 options 对象和默认类型和轴线配置进行合并，这样你可以将个人图表配置写的尽可能地明确并且能改变相匹配的全局配置。全局选项定义为Chart.defaults.global。各种类型的图表默认配置将在之后详细介绍。

以下示例将在创建图表时将所有没有自定义 hover mode 的配置统一定义为 'nearest':

Chart.defaults.global.hover.mode = 'nearest';

// Hover mode is set to nearest because it was not overridden here
var chartInstanceHoverModeNearest = new Chart(ctx, {
    type: 'line',
    data: data,
});

// This chart would have the hover mode that was passed in
var chartInstanceDifferentHoverMode = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        hover: {
            // Overrides the global setting
            mode: 'index'
        }
    }
})

全局字体设置

如下有四种全局设置方式可以改变图表的所有字体。这四种选项将在Chart.defaults.global中进行定义:

通用图表配置

以下选项适用于所有图表。它们可以在全局配置中进行设置，也可以作为options传给图表构造器。

布局配置

布局配置选项通过options.layout命名空间进行传递。图表布局的全局选项在Chart.defaults.global.layout中定义：

标题配置

标题配置选项通过options.title命名空间进行传递。标题配置的全局选项在Chart.defaults.global.title中定义：

标题示例

以下示例将生成内容为"Custom Chart Title"的标题

var chartInstance = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        title: {
            display: true,
            text: 'Custom Chart Title'
        }
    }
})

图例配置

图例配置选项通过options.legend命名空间进行传递。图例配置的全局选项在Chart.defaults.global.legend中定义：

图例标签配置

图例标签配置在上述图例配置中的labels选项中进行设置:

图例项样式

在上述图例标签配置中labels.generateLabels选项中进行设置，必须实现以下接口：

{
    // 图例显示内容
    text: String,

    // 图例色块填充色
    fillStyle: Color,

    // 设置为true时图例上将显示删除线
    hidden: Boolean,

    // For box border. See https://developer.mozilla.org/en/docs/Web/API/CanvasRenderingContext2D/lineCap
    lineCap: String,

    // For box border. See https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/setLineDash
    lineDash: Array[Number],

    // For box border. See https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineDashOffset
    lineDashOffset: Number,

    // For box border. See https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineJoin
    lineJoin: String,

    // 容器边框宽度
    lineWidth: Number,

    // 容器删除色
    strokeStyle: Color

    // 图例块点状风格 (仅当`usePointStyle`设置为`true`时生效)
    pointStyle: String
}

示例

以下示例将设置图表的图例文字颜色为红色：

var chartInstance = new Chart(ctx, {
    type: 'bar',
    data: data,
    options: {
        legend: {
            display: true,
            labels: {
                fontColor: 'rgb(255, 99, 132)'
            }
        }
}
});

提示项配置

提示项配置选项通过options.tooltips命名空间进行传递。提示项配置的全局选项在Chart.defaults.global.tooltips中定义：

提示项回调

提示项标签配置由提示项配置中的callbacks选项声明，提示项配置为文本提供了以下几种方式的回调：

提示项接口

提示项配置实现了以下接口：

{
    // 提示项垂直方向的值
    xLabel: String,

    // 提示项水平方向的值
    yLabel: String,

    // 数据组序号
    datasetIndex: Number,

    // 数据在数据组中的序号
    index: Number,

    // 匹配点的x坐标
    x: Number,

    // 匹配点的y坐标
    y: Number,
}

悬停配置

悬停配置选项通过options.hover命名空间进行传递。悬停配置的全局选项在Chart.defaults.global.hover中定义：

交互模式

悬停配置和提示项配置中可以设置交互模式，以下几种模式可以配合intersect选项生效：

动画配置

以下动画选项可供配置，动画配置的全局选项在Chart.defaults.global.animation中定义：

动画回调

动画配置中的 onProgress和onComplete回调动作可以同步外部图表的绘制，回调通过传对象实现以下接口，关于动画回调的例子见Github

{
    // 图表对象
    chartInstance,

    // 执行中动画的详细信息
    animationObject,
}

动画对象

传给动画回调的对象属于Chart.Animation类型，对象包含以下属性：

{
    // Current Animation frame number
    currentStep: Number,

    // Number of animation frames
    numSteps: Number,

    // Animation easing to use
    easing: String,

    // Function that renders the chart
    render: Function,

    // User callback
    onAnimationProgress: Function,

    // User callback
    onAnimationComplete: Function
}

元素配置

元素配置的全局选项在Chart.defaults.global.elements中进行配置。

选项可以设置四种不同的元素：arc, line, point, rectangle，一旦对元素进行配置将会在全局生效，除非另写更明确的配置进行覆盖。

弧形配置

曲线配置

曲线元素设置图表中的曲线样式，全局选项保存在 Chart.defaults.global.elements.line

颜色

你可以使用一系列格式去设置颜色选项。可以使用hexadecimal, RGB 或者 HSL notations，如果没有使用正确的格式，图表将默认使用全局颜色选项。全局颜色选项设置在Chart.defaults.global.defaultColor, 默认值为rgba(0, 0, 0, 0.1)。

同样，你也可以传一个CanvasGradient对象，使用传递对象可以实现更多的效果。

图案

选项会给图表传一个CanvasPattern对象，例如你想用一张图片填充数据，可以按以下方法实现：

var img = new Image();
img.src = 'https://example.com/my_image.png';
img.onload = function() {
    var ctx = document.getElementById('canvas').getContext('2d');
    var fillPattern = ctx.createPattern(img, 'repeat');

    var chart = new Chart(ctx, {
        data: {
            labels: ['Item 1', 'Item 2', 'Item 3'],
            datasets: [{
                data: [10, 20, 30],
                backgroundColor: fillPattern
            }]
        }
    })
}

使用图案填充可以帮助有视力障碍的人更方便的查看你的图表。

使用Patternnomaly库可以生成数据填充图。

var chartData = {
    datasets: [{
        data: [45, 25, 20, 10],
        backgroundColor: [
            pattern.draw('square', '#ff6384'),
            pattern.draw('circle', '#36a2eb'),
            pattern.draw('diamond', '#cc65fe'),
            pattern.draw('triangle', '#ffce56'),
        ]
    }],
    labels: ['Red', 'Blue', 'Purple', 'Yellow']
};

混合图表类型

单独声明数据的类型时，可以生成混合图表，如下：

var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['Item 1', 'Item 2', 'Item 3'],
        datasets: [
            {
                type: 'bar',
                label: 'Bar Component',
                data: [10, 20, 30],
            },
            {
                type: 'line',
                label: 'Line Component',
                data: [30, 20, 10],
            }
        ]
    }
});